<template>
  <div>
    <qy-navigations
    btnType="list"
    :tabFunList='tabFunList'
    ></qy-navigations>
    <!-- content -->
    <div class="content" id="pdfDom">
      <div class="page-box-one" :style="boxHeight">
        <!-- 个人信息 -->
        <div class="page-person">
          <!-- head -->
          <div class="page-person_head">
            <img src="@/assets/img/icon/head.png" />
            <span class="name">{{ personData.name }}</span>
            <span>{{ personData.sex }}</span>
            <span>职业：{{ personData.job }}</span>
          </div>
          <!-- body -->
          <div class="page-person_body">
            <!-- part-one -->
            <div class="box-row">
              <span class="left">手机</span>
              <span class="right">{{ personData.phone }}</span>
            </div>
            <div class="box-row">
              <span class="left">QQ</span>
              <span class="right">{{ personData.qq }}</span>
            </div>
            <div class="box-row">
              <span class="left">邮箱</span>
              <span class="right">{{ personData.email }}</span>
            </div>
            <div class="box-row">
              <span class="left">微信</span>
              <span class="right">{{ personData.email }}</span>
            </div>
            <!-- part-tow -->
            <div class="titles">
              <span class="iconfont">&#xe62c;</span>职业意向
            </div>
            <div class="box-row">
              <span class="left">职业</span>
              <span class="right">{{ personData.expJob }}</span>
            </div>
            <div class="box-row">
              <span class="left">居住地</span>
              <span class="right">{{ personData.livePlace }}</span>
            </div>
            <div class="box-row">
              <span class="left">收入</span>
              <span class="right">{{ personData.expIncome }}</span>
            </div>
            <!-- part-three -->
            <div class="titles"><span class="iconfont">&#xe639;</span>技能</div>
            <div class="titles-row">
              <span>{{ personData.skill }}</span>
            </div>
            <div class="titles">
              <span class="iconfont">&#xe634;</span>兴趣爱好
            </div>
            <div class="titles-row">
              <span>{{ personData.interest }}</span>
            </div>
          </div>
        </div>
        <!-- 信息详情 -->
        <div class="page-con" id="page-con">
          <!-- myself -->
          <div class="page-con_box">
            <div class="titles">
              <span class="iconfont">&#xe635;</span>自我介绍
            </div>
            <div class="contents-myself">
              {{ personData.myIntroduce }}
            </div>
          </div>
          <!-- 工作经历 -->
          <div class="page-con_box">
            <div class="titles">
              <span class="iconfont">&#xe63b;</span>工作经历
            </div>
            <div class="contents-education">
              <div
                class="row-msg"
                v-for="(item, index) in personData.jobExp"
                :key="'jobExp' + index"
              >
                <div>
                  <span class="name">{{ item.name }}</span>
                  <span class="time">{{ item.startTime }} ~ {{ item.endTime }}</span>
                </div>
                <div class="desc">
                  {{ item.content }}
                </div>
              </div>
              <div class="row-img"></div>
            </div>
          </div>
          <!-- 项目经历 -->
          <div class="page-con_box">
            <div class="titles">
              <span class="iconfont">&#xe63a;</span>项目经历
            </div>
            <div class="contents-experience">
              <div
                v-for="(item, index) in personData.projectExp"
                :key="'projectExp' + index"
                class="item"
              >
                <div>{{ item.name }}</div>
                <div class="time">
                  <div>{{ item.title }}</div>
                  <div>{{ item.startTime }} ~ {{ item.endTime }}</div>
                </div>
                <div class="desc" >
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 控制器 -->
    <div class="controller">
      <div>
        <el-button type="success" plain size="small" @click="controller('compile')" >编辑</el-button>
      </div>
      <div class="qy-padl10" >
        <el-button type="primary" plain size="small" @click="getPdf" >导出PDF</el-button>
      </div>
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="totalPage"
          @current-change="currentPageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  onMounted,
  inject
} from "vue";
import { useRouter } from 'vue-router'
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  name: "PersonSpaceResume",
  setup() {
    const stateStyle = reactive({
      boxHeight:''
    })
    const state = reactive({
      //tab fun
      tabFunList:[
        {name:'写简历',type:'link',func:'',path:'/personspace/resume/compile?type=add'}
      ],
      //参数
      htmlTitle: "",
      currentPage: 1,
      currentId:0,
      totalPage: 1,
      pageList:[],
      personData: {
        name: "", //姓名
        sex: "", //性别
        job: "", //职业
        phone: "", //手机号码
        qq: "", //qq
        email: "", //email
        wx: "", //微信
        expJob: "", //期望职业
        livePlace: "", //居住地
        expIncome: "", //期望薪资
        //技能
        skill: [{ name: "", step: '' }],
        //兴趣
        interest:"绘画，打球",
        //自我介绍
        myIntroduce:"",
        //工作经历
        jobExp: [
          {
            name: "",
            startTime: "",
            endTime: "",
            content: "",
          }
        ],
        //项目经历
        projectExp: [
          {
            name: "",
            title: "",
            startTime: "",
            endTime: "",
            content: "",
          }
        ],
      },
    });
    const Request = inject("$Request")
    const Api = inject("$Api")
    const router = useRouter()
    const initData = ()=> {
      const params = {
        id:state.currentId
      };
      Request.requestPost(params, Api.apiPersonSpace.resumeList)
        .then((res) => {
          console.log(res);
          state.totalPage = parseInt(res.data.data.totalPage) * 10;
          state.personData = res.data.data;
          state.htmlTitle = res.data.data.name
          state.pageList = res.data.data.pageList
          if(state.currentId == 0){
            state.currentId = state.pageList[0]
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
    const currentPageChange = (val)=> {
       console.log(val)
       state.currentPage = val
       console.log(state.currentPage,state.currentPage-1)
       state.currentId = state.pageList[state.currentPage-1]
       initData()
    }
    // controller
    const controller = (name, id) => {
      switch (name) {
        case "detail":
          router.push("/community/detail?id=" + id);
          break;
        case 'compile':
          console.log(state.currentId)
          router.push({path:'/personspace/resume/compile',query:{type:'compile',id:state.currentId}})
        break;
        default:
          break;
      }
    }
    onMounted(() => {
      initData()
      setTimeout(()=>{
        stateStyle.boxHeight = "height:"+document.getElementById('page-con').offsetHeight+"px"
      },100)
    })
    return {
      ...toRefs(state),
      ...toRefs(stateStyle),
      initData,
      currentPageChange,
      controller
    };
  },
  methods:{
    getPdf(){
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        let pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        let PDF = new JsPDF('', 'pt', 'a4')
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            if (leftHeight > 0) {
              PDF.addPage()
            }
          }
        }
        PDF.save(title + '.pdf')
      }
      )
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
$color-icon:#00ccff;
//图标定义
@font-face {
  font-family: "iconfont";
  src: url("../../assets/icon/iconfont.eot");
  src: url("../../assets/icon/iconfont.eot?#iefix")
      format("embedded-opentype"),
    url("../../assets/icon/iconfont.woff2") format("woff2"),
    url("../../assets/icon/iconfont.woff") format("woff"),
    url("../../assets/icon/iconfont.ttf") format("truetype"),
    url("../../assets/icon/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  color: $color-icon;
  font-style: normal;
  padding-right: 5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
//content
.content {
  width: 80vw;
  height: auto;
  margin-top: 80px;
  margin-bottom: 20px;
  margin-left: 10vw;
  font-size: 12px;
}
// 模板样式01
.page-box-one {
  width: 100%;
  height: 100%;
  min-height: 74vh;
  padding-top: 2vh;
  border: 1px solid $sidebar-border;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  color: $black-light;
  // 个人信息部分
  .page-person {
    width: 25%;
    height: 95%;
    min-height: 70vh;
    padding-bottom: 20px;
    background-color: rgba(204, 204, 204, 0.2);
    // head
    .page-person_head {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      img {
        width: 70px;
        height: 70px;
        margin: 20px 0 10px 0;
        border-radius: 50%;
      }
      .name {
        font-size: 14px;
      }
      span {
        padding: 2px 0;
      }
    }
    //body
    .page-person_body {
      width: 80%;
      margin-left: 10%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: left;
      .titles {
        padding: 10px;
        color: $black-light;
        font-weight: bolder;
        display: flex;
        align-items: center;
      }
      .titles-row {
        padding: 2px 10px;
      }
      .box-row {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding: 5px 10px;
        .left {
          width: 30%;
        }
        .right {
          width: 70%;
        }
      }
    }
  }
  // 详情部分
  .page-con {
    width: 75%;
    height: auto;
    min-height: 70vh;
    padding: 10px 20px 10px 10px;
    .page-con_box {
      .titles {
        padding: 10px;
        color: $black-light;
        font-weight: bolder;
        display: flex;
        align-items: center;
      }
      // myself
      .contents-myself {
        padding-left: 40px;
        text-align: left;
        line-height: 30px;
        margin-bottom: 10px;
      }
      // education
      .contents-education {
        padding-left: 40px;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        .row-msg {
          text-align: left;
          padding-top: 15px;
          .name {
            color: $black-weight;
          }
          .time {
            color: $gray-weight;
            font-size: 12px;
            padding-left: 15px;
          }
          .desc {
            padding-top: 5px;
            span {
              padding-right: 10px;
            }
          }
        }
      }
      // experience
      .contents-experience {
        padding-left: 40px;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        text-align: left;
        .item {
          padding: 5px 0;
        }
        .time {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          color: $gray-weight;
          padding: 2px 0;
        }
        .desc{
          padding: 2px 0;
        }
      }
    }
  }
}
/* 控制器 */
.controller {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 2vh;
  width: 80vw;
  margin-left: 10vw;
}
</style>